import React, { PropTypes, PureComponent } from 'react';
import { Form, Input, Button, Row, Col } from 'antd';

import styles from './search.less';

const FormItem = Form.Item;
const Search = Input.Search;

@Form.create()
export default class searchGenre extends PureComponent {
	constructor(props) {
		super(props);

	}

	onKeyChange=()=>{
		this.props.form.setFieldsValue({
   keyname:'',
  });
	}
	onQuery = () => {
		this.props.form.validateFields((err, values) => {
			console.log('Received values of form: ', values);
			this.props.onQuery({ values });
		});
	}

	render() {
		const {
			form,
			label,
			buttonText,
			placeholder
		} = this.props;
		const { getFieldDecorator } = form;
		const aArr = location.hash.split('?')[1]
		console.log("ARR>>>>",aArr);
		if(aArr.indexOf('name') > -1){
			var barr = aArr.split('&')
			var searchvalue = decodeURIComponent(barr[0].split('=')[1])
			if(barr.length > 3){
				var searchvalue = decodeURIComponent(barr[1].split('=')[1])
			}
		}
		if(aArr.indexOf('username') > -1){
			var searchvalue = ""
		}

		return (
			<Form className={styles.searchGenre}>
				<Row type="flex" justify="start" align="middle">
					<Col>
						<FormItem label={label}>
							{getFieldDecorator(
								'keyname',
								{
									initialValue: searchvalue || "",
								})(
									<Search
						    style={{ width: 200 }}
						    onSearch={this.onQuery}
						    onChange={this.onKeyChange}
								placeholder={placeholder}
						   />
							)}
						</FormItem>
					</Col>
					<Col>
						<Button className={styles.searchbnt} type="primary" onClick={this.onQuery} >
							{buttonText}
						</Button>
					</Col>
				</Row>
			</Form>
		);
	}
}

searchGenre.PropTypes = {
	form: PropTypes.object.isRequired,
	onQuery: PropTypes.func.isRequired,
};
